<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>发帖</title>
    <link rel="stylesheet" href="./css/save_edit.css">
</head>
<body>
    <div id="app">
        <div class="center_pane">
            <div class="item">
                <div class="text-area-box">
                    <div class="edit" id="sub_content" contenteditable="true"></div>
                </div>
            </div>
            <div class="item">
                <div class="tool-bar">
                    <div class="item_left">
                        <div attr-click="emoji" id="emoji">
                            <svg aria-hidden="true" viewBox="0 0 1024 1024">
                                <path fill="currentColor" d="M511.608 53.301c253.332 0 458.699 205.367 458.699 458.699S764.941 970.699 511.608 970.699 52.909 765.332 52.909 512 258.276 53.301 511.608 53.301zm0 70.569c-214.358 0-388.13 173.772-388.13 388.13s173.772 388.13 388.13 388.13S899.738 726.358 899.738 512s-173.772-388.13-388.13-388.13zM728.8 611.126c17.589 10.026 23.293 31.699 12.739 48.409-55.945 88.579-133.694 134.742-229.932 134.742S337.62 748.114 281.675 659.535c-10.553-16.71-4.85-38.383 12.739-48.409 17.589-10.026 40.403-4.607 50.956 12.102 43.097 68.237 97.404 100.481 166.236 100.481s123.139-32.244 166.236-100.481c10.556-16.71 33.369-22.128 50.958-12.102zM382.232 347.339c32.478 0 58.807 26.329 58.807 58.808 0 32.478-26.329 58.808-58.807 58.808s-58.808-26.329-58.808-58.808 26.329-58.808 58.808-58.808zm235.23 0c32.478 0 58.808 26.329 58.808 58.808 0 32.478-26.329 58.808-58.808 58.808-32.478 0-58.807-26.329-58.807-58.808-.001-32.479 26.328-58.808 58.807-58.808z"></path>
                            </svg>
                            <a>表情</a>
                       </div>
                        <div attr-click="test01" upload-click="uploadPic" accept="image/*">
                            <svg aria-hidden="true" viewBox="0 0 1024 1024">
                                <path fill-rule="evenodd" clip-rule="evenodd" fill="currentColor" d="M864.845 88.586c51.966 0 94.092 42.127 94.092 94.092v658.644c0 51.966-42.126 94.092-94.092 94.092h-705.69c-51.966 0-94.092-42.126-94.092-94.092V182.678c0-51.966 42.126-94.092 94.092-94.092h705.69zM330.92 597.153L139.912 788.222a35.635 35.635 0 01-4.231 3.618l-.049 49.482c0 12.991 10.532 23.523 23.523 23.523h439.457L330.92 597.153zm329.322-126.271L482.361 648.81l208.814 208.799a35.324 35.324 0 015.579 7.242l168.091-.006c12.991 0 23.523-10.532 23.523-23.523l.034-150.325a35.124 35.124 0 01-17.605-9.566L660.242 470.882zm204.603-311.727h-705.69c-12.991 0-23.523 10.532-23.523 23.523v509.979L306.245 522.09c13.779-13.779 36.12-13.779 49.9 0a35.173 35.173 0 017.89 12.019c4.003 1.649 7.802 4.162 11.108 7.468l57.302 57.317 203.122-203.082c13.779-13.779 36.12-13.779 49.9 0a35.17 35.17 0 017.893 12.027c4 1.641 7.799 4.154 11.105 7.46l183.903 183.877V182.678c0-12.992-10.531-23.523-23.523-23.523zM370.862 276.77c38.974 0 70.569 31.595 70.569 70.569s-31.595 70.569-70.569 70.569c-38.974 0-70.569-31.595-70.569-70.569s31.595-70.569 70.569-70.569z"></path>
                            </svg>
                            <a>相册</a>
                        </div>
                        <div upload-click="uploadVideo" accept="video/mp4">
                            <svg aria-hidden="true" viewBox="0 0 1024 1024">
                                <path fill-rule="evenodd" clip-rule="evenodd" fill="currentColor" d="M864.845 88.586c51.966 0 94.092 42.127 94.092 94.092v658.644c0 51.966-42.126 94.092-94.092 94.092h-705.69c-51.966 0-94.092-42.126-94.092-94.092V182.678c0-51.966 42.126-94.092 94.092-94.092h705.69zm23.523 288.157H135.632v464.579c0 12.991 10.532 23.523 23.523 23.523h705.69c12.991 0 23.523-10.532 23.523-23.523V376.743zM446.071 500.238c4.837 0 9.591 1.372 13.807 3.985l139.695 86.581c13.556 8.402 18.364 27.322 10.739 42.259-2.529 4.953-6.244 9.046-10.739 11.833l-139.695 86.581c-13.556 8.402-30.728 3.104-38.353-11.833-2.371-4.645-3.617-9.884-3.617-15.213V531.269c0-17.138 12.609-31.031 28.163-31.031zm418.774-341.083h-94.139l-58.807 147.019h176.47V182.678c-.001-12.992-10.532-23.523-23.524-23.523zm-585.77 0h-119.92c-12.991 0-23.523 10.532-23.523 23.523v123.496h84.636l58.807-147.019zm205.826 0H349.644l-58.807 147.019h135.257l58.807-147.019zm215.236 0H555.471l-58.807 147.019 144.985.035a24.05 24.05 0 011.071-3.392l57.417-143.662z"></path>
                            </svg>
                            <a>视频</a>
                        </div>
                        <div attr-click="topic">
                            <svg aria-hidden="true" viewBox="0 0 1024 1024">
                                <path fill="currentColor" d="M370.862 900.13c0 19.487-15.797 35.284-35.285 35.284-17.863 0-32.626-13.274-34.962-30.497l-.322-4.788V723.707H123.87c-19.487 0-35.285-15.797-35.285-35.285 0-17.863 13.274-32.626 30.496-34.962l4.788-.322h176.423V347.339H123.87c-19.487 0-35.285-15.797-35.285-35.285 0-17.863 13.274-32.626 30.496-34.962l4.788-.322h176.423v-152.9c0-19.487 15.797-35.285 35.284-35.285 17.863 0 32.626 13.274 34.962 30.497l.322 4.788v152.9h305.799v-152.9c0-19.487 15.797-35.285 35.285-35.285 17.863 0 32.626 13.274 34.963 30.497l.322 4.788v152.9h152.9c19.487 0 35.284 15.797 35.284 35.284 0 17.863-13.274 32.626-30.497 34.962l-4.788.322h-152.9v305.799h152.9c19.487 0 35.284 15.797 35.284 35.284 0 17.863-13.274 32.626-30.497 34.962l-4.788.322h-152.9V900.13c0 19.487-15.797 35.284-35.285 35.284-17.863 0-32.626-13.274-34.963-30.497l-.322-4.788V723.707H370.862V900.13zm0-246.992h305.799V347.339H370.862v305.799z"></path>
                            </svg>
                            <a>话题</a>
                        </div>
                        <div>
                            <svg aria-hidden="true" viewBox="0 0 1024 1024">
                                <path fill="currentColor" d="M740.316 51.648L218.85 425.366c-36.959 26.487-45.448 77.92-18.961 114.879l4.649 5.898a82.362 82.362 0 0016.853 14.812l131.052 86.662L209.404 895.12c-16.255 28.118-6.638 64.09 21.48 80.345 20.2 11.678 45.393 10.308 64.209-3.49L805.88 597.398c36.667-26.889 44.594-78.412 17.705-115.079l-5.261-6.461a82.307 82.307 0 00-19.256-15.737L685.106 392.77l141.384-265.7c15.255-28.673 4.377-64.284-24.296-79.538a58.806 58.806 0 00-61.878 4.116zM259.957 482.725l480.568-344.429-133.561 251.152c-8.865 16.663-3.047 37.352 13.204 46.952l143.006 84.48a11.773 11.773 0 013.503 3.171l1.51 2.77c1.84 4.824.326 10.469-4.039 13.67L298.575 881.859l131.612-227.654c9.34-16.157 4.483-36.794-11.083-47.089L260.32 502.095a11.764 11.764 0 01-3.072-2.959c-3.783-5.279-2.57-12.627 2.709-16.411z"></path>
                            </svg>
                            <a>头条</a>
                        </div>
                        <div>
                            <svg aria-hidden="true" viewBox="0 0 1024 1024">
                                <path fill-rule="evenodd" clip-rule="evenodd" fill="currentColor" d="M794.276 582.569c-38.974 0-70.569-31.595-70.569-70.569s31.595-70.569 70.569-70.569 70.569 31.595 70.569 70.569-31.594 70.569-70.569 70.569zm-282.276 0c-38.974 0-70.569-31.595-70.569-70.569s31.595-70.569 70.569-70.569 70.569 31.595 70.569 70.569-31.595 70.569-70.569 70.569zm-282.276 0c-38.974 0-70.569-31.595-70.569-70.569s31.595-70.569 70.569-70.569 70.569 31.595 70.569 70.569-31.595 70.569-70.569 70.569z"></path>
                            </svg>
                            <a>更多</a>
                        </div>
                    </div>
                    <div class="item_right">
                        <button class="button_1" attr-click="sendSubContent">发送</button>
                    </div>
                </div>
            </div>
            <div class="item">
                <div class="tool_img">
                </div>
            </div>
        </div>
    </div>
<!--    表情面板 -->
<div class="emoji_pane" id="emoji_pane">
    <div id="dom-emoji"></div>
</div>
<script src="js/crypto-js.min.js"></script>
<script src="./js/common.js"></script>
<script>

    let isReq=false;
    loadSecrypt();
    function loadSecrypt(){
        common.loadScript('/lay/secrypt-script.js')
            .then(() => {
                isReq=true;
                console.log('脚本加载完成');
                // 在这里可以调用加载的脚本中的函数
            })
            .catch(error => {
                console.error('脚本加载失败:', error);
            });
    }


    common.init();
    var dom=common.getDomById('dom-emoji')

    let lastEle=null;
    let isUpload=false;
    let emoji=document.getElementById('emoji')

    let emojiPane=document.getElementById('emoji_pane');
    common.elementBoundTargetBottomClick(emoji,emojiPane);

    function uploadVideo(files){
        console.log("files");
    }

    function topic(){
        let subContent=common.getDomById('sub_content');
        subContent.innerHTML+='<span class="hash">#输入话题#</span>&nbsp'
    }

    //发送内容
    function sendSubContent(){
        let subContent=common.getDomById('sub_content');
        let text=subContent.innerHTML;
        let json={};
        json.contentText=text;
        json.title='短文'

        let toolImg=document.querySelector(".tool_img");
        const elementsWithChild = toolImg.querySelectorAll('.item_3');

        let imgList=[];
        if(elementsWithChild){
            elementsWithChild.forEach((e)=>{
                const dataset = e.dataset;
                let obj={};
                for (const key in dataset) {
                    if(key==='id'){
                        obj.id=dataset[key];
                    }
                    if(key==='url'){
                        obj.url=dataset[key];
                    }
                }
                imgList.push(obj);
            })
        }
        if(imgList && imgList.length>0){
            json.imgList=JSON.stringify(imgList);
        }
        if(isReq){
            console.log(json);
            secrypt_mode.encryptFormData('/sub-title/encrypt/saveorupdate',json,(res)=>{
                console.log(res);
            })
        }
    }



    function insertTextAtCursor(text) {
        const selection = window.getSelection();
        if (selection.rangeCount > 0) {
            const range = selection.getRangeAt(0);
            range.deleteContents();// 删除原有文本
            range.insertNode(document.createTextNode(text));// 插入新的dom
        }
    }

    let arrFile=[];
    function uploadPic(files){

        uploadFiles(files,(result)=>{
            if(result.code===200){
                let arr=result.data;
                createPicList(arr,()=>{
                    common.childCloseParent("close-box","item_3",(data)=>{
                        for (const key in data) {
                            if(key==='id'){
                                common.arrRemoveByPropertyValue(arrFile,'id',data[key]);
                            }
                        }
                        let toolImg=document.querySelector(".tool_img");
                        const elementsWithChild = toolImg.querySelectorAll('.item_3');
                        //删除的只剩一个时
                        if(elementsWithChild.length===0){
                            lastEle.replaceWith();
                            lastEle=null;
                            isUpload=false;
                        }
                    })
                    //添加拖动
                    common.startDraggable("tool_img","item_3",["close-box"])
                    if(!isUpload){
                        //添加上传
                        common.addUploadClick('uploadImg',(files)=>{
                            uploadPic(files);
                        })
                        isUpload=true;
                    }
                })
            }
        })



    }

    async function postData(url,data,callback,errBack){
        const formData = new FormData();
        let jsonStr=JSON.stringify(data);
        formData.append("data",jsonStr);
        try {
            const response = await fetch('/sub-title/uploadImg', {
                method: 'POST',
                body: formData, // 直接发送 FormData
            });
            if (response.ok) {
                const result = await response.json();
                if(callback){
                    callback(result);
                }
            } else {
                if(errBack){
                    errBack(response.statusText)
                }
            }
        }catch (error) {
            errBack(error)
        }
    }

    async function uploadFiles(files,callback){
        const formData = new FormData();
        for (let i = 0; i < files.length; i++) {
            formData.append('files', files[i]); // 将文件添加到 FormData
        }
        try {
            const response = await fetch('/sub-title/uploadImg', {
                method: 'POST',
                body: formData, // 直接发送 FormData
            });

            if (response.ok) {
                const result = await response.json();
                console.log('文件上传成功:', result);
                if(callback){
                    callback(result);
                }
            } else {
                console.error('文件上传失败:', response.statusText);
            }
        } catch (error) {
            console.error('请求失败:', error);
        }
    }

    function createPicList(arr,callback){
        let toolImg=document.querySelector(".tool_img");
        const elementsWithChild = toolImg.querySelectorAll('.item_3');
        let index=elementsWithChild.length;
        if(!lastEle){
            let item=document.createElement("div");
            item.classList.add('item_4');
            let upload_box=document.createElement("div");
            upload_box.classList.add("upload_box");
            upload_box.innerHTML="     <svg t=\"1742452600828\" class=\"icon\" viewBox=\"0 0 1024 1024\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" p-id=\"11188\" width=\"36\" height=\"36\"><path d=\"M884.392 476.688h-336.6v-336.6c0-19.422-15.891-35.312-35.313-35.312-19.421 0-35.311 15.89-35.311 35.312v336.6H140.567c-19.421 0-35.312 15.89-35.312 35.311 0 19.422 15.89 35.312 35.312 35.312h336.6v336.6c0 19.421 15.89 35.311 35.311 35.311 19.422 0 35.312-15.89 35.312-35.312V547.312h336.6c19.421 0 35.312-15.89 35.312-35.312 0.001-19.421-15.89-35.312-35.31-35.312z\" p-id=\"11189\"></path></svg>\n" +
                "                       ";
            upload_box.setAttribute('upload-click', 'uploadImg');
            item.appendChild(upload_box);
            toolImg.appendChild(item);
            lastEle=item;
        }
        for (let i = 0; i < arr.length; i++) {
            let item=document.createElement("div");
            item.classList.add('item_3');
            item.classList.add('draggable_box');

            let a=document.createElement("a");
            a.textContent="x";
            a.classList.add("close-box");
            item.appendChild(a);

            let img=document.createElement("img");
            img.src=arr[i].url;
            Object.assign(item.dataset, {
                id: arr[i].id,
                fileName: arr[i].fileName,
                url:arr[i].url
            });
            item.appendChild(img);
            // 将新元素插入到最后一个子元素的前面
            toolImg.insertBefore(item, lastEle);
        }
        callback();
    }


    // const arr=[];
    // let index=files.length-1;
    // const readers = [];
    // for (let i = 0; i < files.length ; i++) {
    //     let file=files[i];
    //     const reader = new FileReader();
    //     const promise = new Promise((resolve) => {
    //         reader.onload = function(e) {
    //             let obj={};
    //             obj.file=file;
    //             obj.url=e.target.result;
    //             let uuid=common.generateUUID();
    //             let bool=true;
    //             while (bool){
    //                let newArr= common.arrFilterByPropertyValue(arrFile,'id',uuid);
    //                if(newArr.length===0){
    //                    bool=false;
    //                }else {
    //                    uuid=common.generateUUID();
    //                }
    //             }
    //             obj.id=uuid;
    //             obj.name=file.name
    //             // 处理单个文件读取完成
    //             arr.push(obj);
    //             arrFile.push(obj);
    //             resolve(); // 标记当前文件读取完成
    //         };
    //     });
    //     readers.push(promise); // 将 Promise 存入数组
    //     reader.readAsDataURL(file); // 开始读取文件
    // }
    // // 等待所有 Promise 完成
    // Promise.all(readers).then(() => {
    //
    // });
</script>
</body>
</html>